// Copied from https://github.com/orchidjs/tom-select/issues/559#issuecomment-1756702498 by @silent-e - thank you!

@media (prefers-color-scheme: dark) {

	.ts-control,
	.full .ts-control,
	.ts-wrapper.single.input-active .ts-control {
		background-color: var(--bs-body-bg);
		border: var(--bs-border-width) solid var(--bs-border-color);
		color: var(--bs-body-color);
	}

	.ts-control>.item,
	.ts-control>input {
		color: $input-color;
	}

	.ts-wrapper:not(.form-control):not(.form-select).single .ts-control,
	.ts-wrapper.single:not(.form-control):not(.form-floating.form__text-area):not(.form-select) .ts-control {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	}

	.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
		border-inline-start-color: var(--bs-border-color);

		&:hover {
			background-color: var(--bs-secondary-bg);
		}
	}

	.ts-wrapper.multi .ts-control>div {
		background-color: var(--bs-secondary-bg);
		color: var(--bs-body-color);
	}

	.ts-dropdown {
		background-color: var(--bs-body-bg);
		color: var(--bs-body-color);

		.active {
			background-color: var(--bs-secondary-bg);
			color: var(--bs-body-color);
		}

		[data-selectable] .highlight {
			background: $yellow-800;
		}
	}
}
